<template>
  <div v-loading="choiceInfoLoading || loading">
    <ContentWrap>
      <el-descriptions
        :title="t('doubleChioce.mentor.info.title')"
        :column="5"
        direction="vertical"
        label-width="100"
        border
      >
        <el-descriptions-item :label="t('doubleChioce.mentor.info.allQuota')">
          <div v-if="choice.quota1 > 0">
            {{ t('batchMentor.fields.quota1') }}: {{ choice.quota1 }}
          </div>
          <div v-if="choice.quota2 > 0">
            {{ t('batchMentor.fields.quota2') }}: {{ choice.quota2 }}
          </div>
          <div v-if="choice.quota3 > 0">
            {{ t('batchMentor.fields.quota3') }}: {{ choice.quota3 }}
          </div>
          <div v-if="choice.quota4 > 0">
            {{ t('batchMentor.fields.quota4') }}: {{ choice.quota4 }}
          </div>
          <div v-if="choice.quota5 > 0">
            {{ t('batchMentor.fields.quota5') }}: {{ choice.quota5 }}
          </div>
          <div
            v-if="
              choice.quota1 === 0 &&
              choice.quota2 === 0 &&
              choice.quota3 === 0 &&
              choice.quota4 === 0 &&
              choice.quota5 === 0
            "
          >
            {{ t('doubleChioce.mentor.info.na') }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item :label="t('doubleChioce.mentor.info.remainQuota')">
          <div v-if="choice.quota1 > 0">
            {{ t('batchMentor.fields.quota1') }}: {{ choice.quota1Remaining }}
          </div>
          <div v-if="choice.quota2 > 0">
            {{ t('batchMentor.fields.quota2') }}: {{ choice.quota2Remaining }}
          </div>
          <div v-if="choice.quota3 > 0">
            {{ t('batchMentor.fields.quota3') }}: {{ choice.quota3Remaining }}
          </div>
          <div v-if="choice.quota4 > 0">
            {{ t('batchMentor.fields.quota4') }}: {{ choice.quota4Remaining }}
          </div>
          <div v-if="choice.quota5 > 0">
            {{ t('batchMentor.fields.quota5') }}: {{ choice.quota5Remaining }}
          </div>
          <div
            v-if="
              choice.quota1 === 0 &&
              choice.quota2 === 0 &&
              choice.quota3 === 0 &&
              choice.quota4 === 0 &&
              choice.quota5 === 0
            "
          >
            {{ t('doubleChioce.mentor.info.na') }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item :label="t('doubleChioce.mentor.info.choose')">
          {{ choice.choose }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('doubleChioce.mentor.info.apply')">
          {{ choice.apply }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('doubleChioce.mentor.info.remaining')">
          {{ choice.remaining }}
        </el-descriptions-item>
      </el-descriptions>
    </ContentWrap>

    <ContentWrap>
      <!-- 搜索工作栏 -->
      <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
        <el-form-item :label="t('student.fields.batchId')">
          <el-select
            v-model="queryParams.batchId"
            :placeholder="t('common.selectTextPlaceholder') + t('student.fields.batchId')"
            class="!w-160px"
            @change="
              () => {
                handleQuery()
                getChoiceInfo()
              }
            "
          >
            <el-option
              v-for="(item, index) in batchOptions"
              :key="index"
              :label="item.batchName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="t('student.fields.chioceStatus')" prop="choiceStatus">
          <el-select
            v-model="queryParams.choiceStatus"
            :placeholder="t('common.selectTextPlaceholder') + t('student.fields.chioceStatus')"
            clearable
            class="!w-160px"
            @change="handleQuery"
          >
            <el-option :label="t('student.index.dcNotChosen')" value="未双选" />
            <el-option :label="t('student.index.dcChosen')" value="已双选" />
          </el-select>
        </el-form-item>
        <el-form-item :label="t('student.fields.university')" prop="university">
          <el-input
            v-model="queryParams.schoolName"
            :placeholder="t('common.inputTextPlaceholder') + t('student.fields.university')"
            clearable
            @keyup.enter="handleQuery"
            class="!w-160px"
          />
        </el-form-item>
        <el-form-item :label="t('student.fields.is985')" prop="is985">
          <el-select
            v-model="queryParams.is985"
            :placeholder="t('common.selectTextPlaceholder') + t('student.fields.is985')"
            clearable
            class="!w-160px"
            @change="handleQuery"
          >
            <el-option :label="t('common.yes')" :value="true" />
            <el-option :label="t('common.no')" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item :label="t('student.fields.is211')" prop="is211">
          <el-select
            v-model="queryParams.is211"
            :placeholder="t('common.selectTextPlaceholder') + t('student.fields.is211')"
            clearable
            class="!w-160px"
            @change="handleQuery"
          >
            <el-option :label="t('common.yes')" :value="true" />
            <el-option :label="t('common.no')" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item :label="t('student.fields.isFirstClass')" prop="isFirstClass">
          <el-select
            v-model="queryParams.isFirstClass"
            :placeholder="t('common.selectTextPlaceholder') + t('student.fields.isFirstClass')"
            clearable
            class="!w-160px"
            @change="handleQuery"
          >
            <el-option :label="t('common.yes')" :value="true" />
            <el-option :label="t('common.no')" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery">
            <Icon icon="ep:search" class="mr-5px" />
            {{ t('common.search') }}
          </el-button>
          <el-button @click="resetQuery">
            <Icon icon="ep:refresh" class="mr-5px" />
            {{ t('common.reset') }}
          </el-button>
        </el-form-item>
      </el-form>
    </ContentWrap>

    <!-- 列表 -->
    <ContentWrap>
      <vxe-toolbar ref="toolbarRef" custom />
      <vxe-table
        id="iInterviewSpecialist-table"
        ref="tableRef"
        :data="list"
        stripe
        :custom-config="vxeTableConfig"
        :column-config="{ resizable: true }"
        :size="vxeTableSize"
      >
        <vxe-column
          :title="t('common.index')"
          type="seq"
          field="seq"
          width="60"
          align="center"
          fixed="left"
        />
        <vxe-column
          :title="t('student.fields.studentName')"
          field="studentName"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
          fixed="left"
        />
        <vxe-column
          :title="t('student.fields.phone')"
          field="phone"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.batchId')"
          field="batchName"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <!--        <vxe-column-->
        <!--          :title="t('student.fields.interviewScore')"-->
        <!--          field="interviewScore"-->
        <!--          align="center"-->
        <!--          show-header-overflow-->
        <!--          show-overflow-->
        <!--          min-width="100"-->
        <!--        />-->
        <!--        <vxe-column-->
        <!--          :title="t('student.fields.confirmJudges')"-->
        <!--          field="confirmJudges"-->
        <!--          align="center"-->
        <!--          show-header-overflow-->
        <!--          show-overflow-->
        <!--          min-width="100"-->
        <!--        />-->
        <vxe-column
          :title="t('student.fields.interviewDate')"
          field="interviewDate"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
          :formatter="vxeDateFormatter"
        />
        <vxe-column
          :title="t('student.fields.interviewTime')"
          field="interviewTime"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.interviewGroupId')"
          field="groupName"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.chioceStatus')"
          field="chioceStatus"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.chioceMentorId')"
          field="mentorName"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.interviewStatus')"
          field="interviewStatus"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.birthdate')"
          field="birthdate"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
          :formatter="vxeDateFormatter2"
        />
        <vxe-column
          :title="t('student.fields.gender')"
          field="gender"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.politicalStatus')"
          field="politicalStatus"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.ethnic')"
          field="ethnic"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.identityNumber')"
          field="identityNumber"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.contactAddress')"
          field="contactAddress"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.email')"
          field="email"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.university')"
          field="university"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.is985')"
          field="is985"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
          :formatter="vxeBooleanFormatter"
        />
        <vxe-column
          :title="t('student.fields.is211')"
          field="is211"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
          :formatter="vxeBooleanFormatter"
        />
        <vxe-column
          :title="t('student.fields.isFirstClass')"
          field="isFirstClass"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
          :formatter="vxeBooleanFormatter"
        />
        <vxe-column
          :title="t('student.fields.studyMajor')"
          field="studyMajor"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.applyMajor')"
          field="applyMajor"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.majorRank')"
          field="majorRank"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.majorTotal')"
          field="majorTotal"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.classRank')"
          field="classRank"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.classTotal')"
          field="classTotal"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.cet4Score')"
          field="cet4Score"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.cet6Score')"
          field="cet6Score"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.attachment')"
          field="attachment"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        >
          <template #default="scope">
            <FileObjectDownload :file-json="scope.row.attachment" />
          </template>
        </vxe-column>
        <vxe-column
          :title="t('common.operate')"
          field="operator"
          align="center"
          fixed="right"
          width="100"
        >
          <template #default="scope">
            <el-tooltip
              v-if="scope.row.mentorStatus === '是'"
              effect="dark"
              :content="scope.row.useQuota"
              placement="left"
            >
              <el-button link type="primary" disabled>
                {{ t('doubleChioce.studentRequest.accepted') }}
              </el-button>
            </el-tooltip>
            <el-button v-else-if="scope.row.mentorStatus === '否'" link type="primary" disabled>
              {{ t('doubleChioce.studentRequest.denied') }}
            </el-button>
            <template v-else>
              <!-- 导师没选择 则判断能否选择 -->
              <template v-if="checkSelectAvailable(scope.row)">
                <!-- 是985的 才可以用指标5 不是985的只能用指标1234 -->
                <el-button link type="primary" disabled>
                  {{ t('doubleChioce.mentor.fullBtn') }}
                </el-button>
              </template>
              <template v-else>
                <el-button
                  link
                  type="primary"
                  :disabled="scope.row.chioceStatus === '已双选'"
                  @click="handleAccept(scope.row)"
                >
                  {{ t('doubleChioce.studentRequest.accept') }}
                </el-button>
                <el-button
                  link
                  type="primary"
                  :disabled="scope.row.chioceStatus === '已双选'"
                  @click="handleDeny(scope.row)"
                >
                  {{ t('doubleChioce.studentRequest.deny') }}
                </el-button>
              </template>
            </template>
          </template>
        </vxe-column>
      </vxe-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </ContentWrap>
  </div>

  <MentorQuotaSelect
    ref="mentorQuotaSelectRef"
    @success="
      () => {
        getChoiceInfo()
        getList()
      }
    "
  />
</template>

<script setup lang="ts">
import type { VxeTableInstance, VxeTablePropTypes, VxeToolbarInstance } from 'vxe-table'
import { useAppStore } from '@/store/modules/app'
import { BatchApi, BatchVO } from '@/api/recruit/batch'
import InterviewGroupList from '@/views/recruit/interviewgroup/components/InterviewGroupList.vue'
import {
  DoubleChioceApi,
  DoubleChioceMentorRespVO,
  DoubleChioceMyBatchInfoRespVO
} from '@/api/recruit/doublechioce'
import { vxeDateFormatter, vxeDateFormatter2 } from '@/utils/formatTime'
import MentorQuotaSelect from '@/views/recruit/doublechioce/MentorQuotaSelect.vue'
import FileObjectDownload from '@/components/FileObjectDownload/index.vue'
import { vxeBooleanFormatter } from '@/utils/formatter'

/** 我的双选 列表 */
defineOptions({ name: 'MentorRequest' })

const router = useRouter() // 路由
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const toolbarRef = ref<VxeToolbarInstance>()
const tableRef = ref<VxeTableInstance>()
const interviewGroupRef = ref<InstanceType<typeof InterviewGroupList>>()

const loading = ref(true) // 列表的加载中
const list = ref<DoubleChioceMentorRespVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  batchId: undefined,
  choiceStatus: undefined,
  schoolName: undefined,
  is985: undefined,
  is211: undefined,
  isFirstClass: undefined,
  applyStatus: undefined
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中

const vxeTableConfig: VxeTablePropTypes.CustomConfig = {
  storage: true,
  mode: 'drawer',
  checkMethod({ column }) {
    return !['seq', 'operator'].includes(column.field)
  }
}

const appStore = useAppStore()
const vxeTableSize = computed(() => appStore.getCurrentSizeVxe)

// 查询列表
const getList = async () => {
  loading.value = true
  try {
    const data = await DoubleChioceApi.getDoubleChioceMentorRequestPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

// 搜索按钮操作
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

// 重置按钮操作
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

// 计划下拉
const batchOptions = ref<BatchVO[]>([])
const getBatchSelectOptions = async () => {
  batchOptions.value = await BatchApi.getSelectList()
}

// 上方统计信息
const choiceInfoLoading = ref(false)
const choice = ref<DoubleChioceMyBatchInfoRespVO>({} as DoubleChioceMyBatchInfoRespVO)
const getChoiceInfo = async () => {
  choiceInfoLoading.value = true
  try {
    choice.value = await DoubleChioceApi.myBatchInfo(queryParams.batchId as string)
  } finally {
    choiceInfoLoading.value = false
  }
}

const checkSelectAvailable = (row: DoubleChioceMentorRespVO) => {
  if (row.is985) {
    // 是985的 才可以用指标5 不是985的只能用指标1234
    return choice.value.remaining === 0
  } else {
    // 非985 只能用指标1234
    return (
      choice.value.quota1RemainingInvite === 0 &&
      choice.value.quota2RemainingInvite === 0 &&
      choice.value.quota3RemainingInvite === 0 &&
      choice.value.quota4RemainingInvite === 0
    )
  }
}

const mentorQuotaSelectRef = ref<InstanceType<typeof MentorQuotaSelect>>()
// 接受
const handleAccept = (row: DoubleChioceMentorRespVO) => {
  mentorQuotaSelectRef.value?.open({
    batchId: queryParams.batchId,
    recruitStudentId: row.id
  })
}

// 拒绝
const handleDeny = async (row: DoubleChioceMentorRespVO) => {
  try {
    await message.confirm(t('doubleChioce.studentRequest.denyConfirm'))
  } catch {
    return
  }
  try {
    loading.value = true
    await DoubleChioceApi.mentorDecisionDoubleChioce({
      id: row.choiceId,
      recruitStudentId: row.recruitStudentId,
      mentorStatus: '否'
    })
    message.success(t('common.operSuccess'))
    getList()
  } finally {
    loading.value = false
  }
}

/** 初始化 **/
onMounted(async () => {
  await getBatchSelectOptions()
  // 然后查询最新计划的数据
  queryParams.batchId = batchOptions.value[0]?.id ?? undefined
  getChoiceInfo()
  getList()

  const table = tableRef.value
  const toolbar = toolbarRef.value
  if (table && toolbar) {
    table.connect(toolbar)
  }
})
</script>

<style lang="scss" scoped>
:deep(.vxe-cell .el-button + .el-button) {
  margin-left: 0;
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 15px !important;
}
</style>
